<template>
  <view class="wrap">

    <!-- 加入班级表单 -->
    <view class="form-container">
      <view class="form-title">加入班级</view>

      <!-- 学生姓名 -->
      <view class="form-item">
        <view class="form-label">学生姓名</view>
        <input
          class="form-input"
          v-model="studentName"
          placeholder="请填写真实姓名"
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- 班级口令 -->
      <view class="form-item">
        <view class="form-label">班级口令</view>
        <input
          class="form-input"
          v-model="classCode"
          placeholder="请填写班级口令"
          placeholder-class="input-placeholder"
        />
        <view class="help-text" @click="contactTeacher">
          班级口令找班级老师索取
        </view>
      </view>

      <!-- 加入按钮 -->
      <view class="submit-btn" @click="joinClass">
        <text class="btn-text">加入班级</text>
      </view>
    </view>
  </view>
</template>

<script>
import { joinBookClassManagement } from '@/api/bookSchoolAssignment'

export default {
  data() {
    return {
      statusBarHeight: 0,
      studentName: '',
      classCode: ''
    }
  },

  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },

  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    },

    /**
     * 联系老师获取班级口令
     */
    contactTeacher() {
      uni.showToast({
        title: '请联系班级老师获取口令',
        icon: 'none'
      });
    },

    /**
     * 加入班级
     */
    async joinClass() {
      if (!this.studentName.trim()) {
        uni.showToast({
          title: '请填写学生姓名',
          icon: 'none'
        });
        return;
      }

      if (!this.classCode.trim()) {
        uni.showToast({
          title: '请填写班级口令',
          icon: 'none'
        });
        return;
      }

      try {
        // 显示加载提示
        uni.showLoading({
          title: '加入中...'
        });

        // 调用加入班级API
        const result = await joinBookClassManagement({
          classManagementPassword: this.classCode.trim(),
          memberName: this.studentName.trim()
        });

        uni.hideLoading();

        if (result.code === 0) {
          uni.showToast({
            title: '加入班级成功',
            icon: 'success'
          });

          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: result.msg || '加入班级失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('加入班级失败:', error);
        uni.showToast({
          title: '加入班级失败，请检查网络连接',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style>
.wrap {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.status-bar {
  width: 100%;
  background-color: #fff;
}

.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.nav-placeholder {
  width: 60rpx;
}

.form-container {
  background-color: #fff;
  margin: 20rpx 32rpx;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 60rpx;
}

.form-item {
  margin-bottom: 60rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 2rpx solid #4FC3F7;
  padding: 0 0 10rpx 0;
}

.input-placeholder {
  color: #ccc;
}

.help-text {
  font-size: 24rpx;
  color: #4FC3F7;
  margin-top: 20rpx;
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
}

.btn-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: 500;
}
</style>
